<template>
  <ul>
    <router-link to="/films/nowplaying" custom v-slot="{navigate, isActive}">
      <li @click="navigate">
        <span :class="isActive ? 'chooseActive' : ''">正在热映</span>
      </li>
    </router-link>
    <router-link to="/films/comingsoon" custom v-slot="{navigate, isActive}">
      <li @click="navigate">
        <span :class="isActive ? 'chooseActive' : ''">即将上映</span>
      </li>
    </router-link>
  </ul>
</template>

<script>
export default {
  components: {
  },
  data () {
    return {

    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
  .chooseActive {
    color: #FF6C29;
    border-bottom: 2px solid #FF6C29;
  }

  ul {
    width: 100%;
    display: flex;
    background: #fff;
    border-bottom: 1px solid #F8F8F8;
    z-index: 1;

    li {
      flex: 1;
      height: 49px;
      line-height: 49px;
      text-align: center;
      font-size: 14px;

      span {
        display: inline-block;
      }
    }
  }
</style>
